<script setup lang="ts">
import { ASSET_STATUS, ASSET_STATUS_COLOR, ASSET_STATUS_BG_COLOR } from '/@/common/constant';

interface Props {
  info: AssetInfo.Dto;
}

const props = withDefaults(defineProps<Props>(), {
  info: () => {
    return {};
  },
});
</script>

<template>
  <view class="app-asset-item">
    <view class="app-asset-item__header">
      <view class="app-asset-item__name">{{ props.info.assetName || '-' }}</view>
      <view class="app-asset-item__state">
        <text
          :style="{
            color: props.info.status ? ASSET_STATUS_COLOR[props.info.status] : '#333',
            backgroundColor: props.info.status
              ? ASSET_STATUS_BG_COLOR[props.info.status]
              : '#fcfcfc',
          }"
        >
          {{ props.info.status ? ASSET_STATUS[props.info.status] : '-' }}
        </text>
      </view>
    </view>
    <view>
      <text>资产编号:&nbsp;&nbsp;</text>
      <text>{{ props.info.assetCode || '-' }}</text>
    </view>
    <view>
      <text>所属区域:&nbsp;&nbsp;</text>
      <text>{{ props.info.areaName || '-' }}</text>
    </view>
  </view>
</template>

<style lang="scss">
.app-asset-item {
  background-color: #fff;
  padding: 20px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: normal;

  &__header {
    display: flex;
    align-items: center;
  }

  &__name {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    flex: 1;
    margin-right: 20px;
  }

  &__state {
    flex-wrap: wrap;
    text-align: center;
    background-color: #26ee4e36;
    width: 90px;
    height: 42px;
    border-radius: 4px;
  }
}
</style>
